<template>
    <div>
        <el-upload
            class="avatar-uploader"
            :action="data.action || 'auto'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="submit_data[data.key]" :src="submit_data[data.key]._url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
    </div>
</template>
<script>
import Common from "./js/Common";
var Js = Common("sls-upload");
Js.mixins = [
  {
    methods: {
      handleAvatarSuccess(res, file) {
        this.$$api_goods_findTopic({
          data,
          fn: data => {
            console.dir(data);
            this.parseObj = data;
            this.default_value.title = data.attributes.title;
            this.default_value.picUrl = data.attributes.picUrl;
            this.default_value.desc = data.attributes.desc;
            this.default_value.url = data.attributes.url;
            this.default_value.sortOrder = data.attributes.sortOrder;
            this.default_value.isShow = data.attributes.isShow;
            this.default_value.type = data.attributes.type;
            this.default_value.isHot = data.attributes.isHot;
          }
        });
        this.submit_data[this.data.key] = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        } else {
          this.$$api_common_upload({
            data: file,
            fn: data => {
              console.dir(data);
              this.submit_data[this.data.key] = data;
            }
          });
        }
        return false;
      }
    }
  }
];
export default Js;
</script>
<style lang='less'>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff !important;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>